<template>
  <div class="call-center">
    <base-header title="万联城服集团数据可视化平台（客户服务）" :rightIcon=true :leftIcon=true @goReload="goReload"></base-header>
    <div class="call-center__top">
      <div class="call-center__top_left">
        <div class="bg m10">
          <div class="back-border h100">
            <base-title title="工单统计" @goDetail="goDetail"></base-title>
            <order-statistics></order-statistics>
          </div>
        </div>
        <div class="bg m10">
          <div class="back-border h100">
            <base-title title="工单来源" @goDetail="goDetail"></base-title>
            <order-source></order-source>
          </div>
        </div>
      </div>
      <div class="call-center__top_center">
        <div class="bg m10">
          <div class="back-border h100">
            <base-title title="工单汇总" @goDetail="goDetail"></base-title>
            <order-summary></order-summary>
          </div>
        </div>
      </div>
      <div class="call-center__top_right">
        <div class="bg m10">
          <div class="back-border h100">
            <base-title title="秩序服务（万联智卡+园区巡更）" @goDetail="goDetail"></base-title>
            <order-service></order-service>
          </div>
        </div>
        <div class="bg m10">
          <div class="back-border h100">
            <base-title title="保洁服务（万联智卡）" @goDetail="goDetail"></base-title>
            <clean-service></clean-service>
          </div>
        </div>
      </div>
    </div>
    <div class="call-center__bottom">
      <div class="xj bg m10">
        <div class="back-border h100">
          <base-title title="设备巡检（万联巡卡+二维码巡检）" @goDetail="goDetail"></base-title>
          <equipment></equipment>
        </div>
      </div>
      <div class="xj bg m10">
        <div class="back-border h100">
          <base-title title="产业园" @goDetail="goDetail"></base-title>
          <industrial-park></industrial-park>
        </div>
      </div>
      <div class="myd bg m10">
        <div class="back-border h100">
          <base-title title="客户满意度" @goDetail="goDetail"></base-title>
          <customer-satisfaction></customer-satisfaction>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseHeader from 'src/components/BaseHeader'
import BaseTitle from 'src/components/BaseTitle'
import OrderStatistics from 'src/components/OrderStatistics'
import OrderSource from 'src/components/OrderSource'
import OrderSummary from 'src/components/OrderSummary'
import CustomerSatisfaction from 'src/components/CustomerSatisfaction'
import IndustrialPark from 'src/components/IndustrialPark'
import Equipment from 'src/components/Equipment'
import OrderService from 'src/components/OrderService'
import CleanService from 'src/components/CleanService'

export default {
  components: {
    BaseTitle,
    BaseHeader,
    OrderStatistics,
    OrderSource,
    OrderSummary,
    CustomerSatisfaction,
    IndustrialPark,
    Equipment,
    OrderService,
    CleanService
  },
  data() {
    return {
      
    }
  },
  methods: {
    goDetail() {
      this.$router.push('/callcenterdetail')
    },
    goReload() {
      this.$router.push('/reloadback')
    }
  }
}
</script>
<style lang="scss">
.call-center {
  display: flex;
  flex-direction: column;
  &__top {
    // height: 55%;
    display: flex;
    &_left {
      width: 25%;
    }
    &_center {
      width: 50%;
    }
    &_right {
      width: 25%;
    }
  }
  &__bottom {
    display: flex;
    justify-content: flex-end;
    .xj {
      width: 38%;
    }
    .myd {
      width: 25%;
    }
  }
}
// @media (min-width: 1920px) {
//   .call-center {
//     width: 100%;
//   }
// }
</style>